<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<el-form :model="form" label-width="auto" disabled>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="姓名" prop="nickname">
						<el-input v-model="form.nickname" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="身份" prop="identityText">
						<el-input v-model="form.identityText" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="商户号余额" prop="balance">
						<el-input v-model="form.balance" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { withdrawalBalance } from '/@/api/admin1';

export default {
	name: 'merchantsBalanceViewDialog',
	setup() {
		const state: any = reactive({
			title: '查看商户号余额',
			open: false,
			form: {},
		});

		/********** 点击事件(on开头) **********/

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			console.log(config);
			reset();
			state.open = true;
			_withdrawalBalance(config);
		};
		// 表单重置
		const reset = () => {
			state.form = {
				nickname: '',
				identityText: '',
				balance: '',
			};
		};

		/********** 网络事件 **********/
		// 查询可提现金额
		const _withdrawalBalance = (_data: object) => {
			withdrawalBalance(_data).then((res: any) => {
				console.log('查询可提现金额', res);
				state.form = {
					..._data,
					balance: res.data.info.money,
				};
			});
		};

		return {
			openDialog,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
